#winner-dailylist{
    position: relative;
    top: 100svh;
    width: 100svw;
    min-height: 100svh;
    /* overflow: hidden; */
    max-height: 100%;
    overscroll-behavior: none;
}
.container-winner { display: flex; flex-direction: row; background: #fff; border-radius: 30px; overflow: hidden; border-color:#167240; border: 7px solid #167240; left: 50%; transform: translateX(-50%); position: relative; height: auto; max-height: auto; width: 100%;
    max-width: 55svw; position: relative; top: 17svh; } 
.left-winner { flex: none; 
    width: 40%;
    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background-color: white; color: white; text-align: center; } 
   
   .right-winner { flex: 1; width: 60%; 
    padding: 1.5rem; background: white; display: flex; flex-direction: column; justify-content: space-between; } 
    .left-winner img { width: 9rem; margin-bottom: 1rem; } 
   
    .left-winner h2 { font-size: 1.25rem; font-weight: bold; } 
   
    .left-winner p { font-size: 0.875rem; margin-top: 0.25rem; } 
   
    .left-winner span { margin-top: 0.5rem; font-weight: 600; font-size: 0.875rem; color: #fecaca; } 
   
    .right-winner { flex: 1; padding: 1.5rem; background: white; display: flex; flex-direction: column; justify-content: space-between; } 
   
    .right-winner label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; color: white; } 
   
    .right-winner select { width: 100%; left: 50%;position: relative;transform: translateX(-50%); max-width: 14svw; /* border: 1px solid #d1d5db; */
    border-radius: 40px; background-color: #167240; padding: 0.5rem; text-align: center; color: white; font-size: 0.875rem; margin-bottom: 1rem; } 
   
   
    .winner-box { max-height: auto; overflow-y: auto;
    padding: 0.75rem; 
    font-size: 0.875rem; } 
   
    #winner-list {
    width: 100%; /* Full width */
    border-collapse: collapse; /* Remove gaps between table cells */
    margin-top: 1rem; /* Add spacing above the table */
    font-size: 0.875rem; /* Adjust font size */
    text-align: center; /* Center-align text */
}

#winner-list th, #winner-list td {
    padding: 0.5rem; /* Add spacing inside cells */
}

#winner-list th {
    background-color:none; /* Header background color */
    color: white; /* Header text color */
    font-weight: bold; /* Make header text bold */
}

#winner-list tr:nth-child(even) {
    background-color: none; /* Alternate row background color */
}

#winner-list tr:hover {
    background-color: none; /* Highlight row on hover */
}

#winner-list > div {
    display: table-row; /* Each winner is a row */
}

#winner-list > div:nth-child(n+6) {
    display: none; /* Hide rows beyond the 5th */
}

#winner-list > div > p {
    display: table-cell; /* Each property (e.g., name, phone) is a cell */
    padding: 0.5rem; /* Add spacing inside cells */
    text-align: center; /* Center-align text */
    word-wrap: break-word; /* Handle long text */
    width: 25%; /* Ensure 4 equal columns */
}

.winner-cell {
    font-size: 13px; /* Adjust font size */
    line-height: 1.5; /* Add spacing between lines */
}

   
    #winner-list p { margin: 0; text-align: center; } 
   
    .winner-name { font-weight: 600; color: #1f2937; } 
   
    .winner-phone { font-size: 13px; color: #6b7280; } 
   
    .winner-info-text {    font-size: 14px;
        color: white;
        margin-top: 19svh;
        position: relative;
        /* bottom: 20px; */
        text-align: center;
        left: 50%;
        transform: translateX(-50%);} 
   
        .grand-winner-info-text {    font-size: 14px;
            color: white;
            position: relative;
            /* bottom: 20px; */
        margin-top: 19svh;

            text-align: center;
            left: 50%;
            display: block;
            transform: translateX(-50%);} 
       
    .winner-error { color: #dc2626; font-size: 0.875rem; } 
    #prize_text_title { object-fit: contain; width: 100%; max-width: 20svw; } 
    #prize_image_winner { object-fit: contain; width: 100%; max-width: 15svw; } 
 
 @media (max-width: 40em){
    .container-winner { flex-direction: column; } 
 #winner-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } 

 .left-winner { flex: none; 
    width: 100%;

    display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1.5rem; background-color: white; color: white; text-align: center; } 
   
   .right-winner { flex: 1; width: 100%; 
    padding: 0; background: white; display: flex; flex-direction: column; justify-content: space-between; } 
    .container-winner { display: flex; flex-direction: column; background: #fff; border-radius: 10px; overflow: hidden; border-color:#167240; border: 9px solid #167240; left: 50%; transform: translateX(-50%); position: relative; height: 100%; max-height: auto; width: 100%;
        max-width: 90svw; position: relative; top: 17svh; } 
        #prize_text_title { object-fit: contain; width: 100%; max-width: 50svw; } 
        #prize_image_winner { object-fit: contain; width: 100%; max-width: 60svw; } 
        
    .right-winner select { width: 100%; left: 50%;position: relative;transform: translateX(-50%); max-width: 50svw; /* border: 1px solid #d1d5db; */
        border-radius: 40px; background-color: #167240; padding: 0.5rem; text-align: center; color: white; font-size: 0.875rem; margin-bottom: 1rem; } 
       #winner-dailylist{top: 105svh;}
       .grand-winner-info-text {    font-size: 14px;
       display: none;
       }

    #winner-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Use 2 columns on mobile */
        gap: 0.75rem; /* Add spacing between cells */
    }

    #winner-list tr {
        display: contents; /* Flatten rows into grid items */
    }

    #winner-list td {
        display: block; /* Make each cell a block for better stacking */
        text-align: left; /* Align text to the left */
        padding: 0.5rem; /* Add padding */
        border: none; /* Remove borders */
        /* Tambahkan margin untuk gap antar cell */
        margin: 0.4rem; /* Atur sesuai kebutuhan, misal 0.4rem */
        background-clip: padding-box; /* Agar background tidak overlap margin */
    }
       
    .winner-info-text {    font-size: 14px;
        color: white;
        margin-top: 20svh;
        padding-bottom: 10svh;

        position: relative;
        /* bottom: 20px; */
        text-align: center;
        left: 50%;
        transform: translateX(-50%);} 

    #winner-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* Use 2 columns */
        grid-auto-rows: auto; /* Automatically adjust row height */
        gap: 0.75rem; /* Add spacing between cells */
    }

    #winner-list thead {
        display: none; /* Hide the table header on mobile */
    }

    #winner-list tbody {
        display: contents; /* Flatten the table body into grid items */
    }

    #winner-list tr {
        display: contents; /* Flatten rows into grid items */
    }

    #winner-list td {
        display: block; /* Make each cell a block for better stacking */
        text-align: left; /* Align text to the left */
        padding: 0.5rem; /* Add padding */
        border: none; /* Remove borders */
        margin: 0.4rem; /* Tambahkan gap antar cell di mobile juga */
        background-color: #fff; /* Optional: Add a background color for better visibility */
    }
}